<template>
	<view style="padding-bottom: 150upx;">
		<image src="../../static/back.png" mode=""
			style="width: 40upx;height: 44upx;position: fixed;top: 50upx;left: 30upx;z-index: 99;" @click="back">
		</image>
		<!-- 	<view class="header" :style="{backgroundImage: 'url(' + zhinfo.picture + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">
			<h2>{{zhinfo.circle_name}}</h2>
			<h3><text>{{zhinfo.start_time}}</text>-<text>{{zhinfo.end_time}}</text></h3>
			<h4>地址：{{zhinfo.shengshiqu}} {{zhinfo.address}}</h4>
		</view> -->
		<view class="header">
			<image :src="zhinfo.picture" mode="" style="width: 100%;height: 500upx;"></image>
		</view>
		<view class="nav">
			<text style="font-size: 30upx;">{{zhinfo.details}}</text>
		</view>
		<view class="banner">
			<view style="background: linear-gradient(135deg, #5ABBF8, #3886F6);border-radius: 10upx;">
				<text class="da">{{totalinfo.pv_num}}</text>
				<text class="xiao">总参展人数</text>
			</view>
			<view style="background: linear-gradient(135deg, #F6B71B, #F97F13);border-radius: 10upx;">
				<text class="da">{{totalinfo.turnover_money}}</text>
				<text class="xiao" v-if="zhinfo.circle_type==4">岗位数量</text>
				<text class="xiao" v-else>预成交金额</text>
				
			</view>
			<view style="background: linear-gradient(135deg, #876DEE, #4934E1);border-radius: 10upx;">
				<text class="da">{{totalinfo.exhibitors_num}}</text>
				<text class="xiao">参展企业</text>
			</view>
			<view style="background: linear-gradient(135deg, #86EECF, #4DBCC4);border-radius: 10upx;flex-direction: row;">
		
				<text class="xiao" @click="isshow=true">查看更多</text>
				<text class="da" style="padding-left: 5upx;">
					<image src="../../static/zhanhui/baiback.png" mode="" style="width: 19upx;height: 29upx;"></image>
				</text>
			</view>
		</view>
		<view class="content">
			<view class="slist">
				<view class="pr52" >
					<text :class="[tabs==-1 ? 'red' : '']" @click="tab(-1)">全部</text>
				</view>
				<view class="pr52" v-for="item,index in fenlei">
					<text :class="[taba==index ? 'red' : '']" @click="tabg(item.id,index)">{{item.class_name}}</text>
				</view>
			</view>
			<view class="shipin" v-if="tabs==-1">

				<view :class="isStyle?'works_box':'works_boxs'">
					<view v-for="(item,index) in splist" :index="index" class="mo" style="position: relative;">
						<view class='item' @click="navPlayer(item.shop_id,index,item.video_id)">
							<image :src='item.cover_img'
								style="width: 340upx;height: 450upx;border-radius: 10upx 10upx 0px 0px;"></image>
							<text class="title">{{item.shopinfo_shop_name}}</text>
						</view>
						<image src="@/static/bofangne.png" mode="" style="width: 60upx;height: 70upx;position: absolute;top: 200upx;left: 70px;"></image>
					</view>
				</view>
				<view style="color: #999999;display: flex;align-items: center;justify-content: center;" @click="more"
					v-show="isStyle" v-if="splist.length>6">查看更多<image src="../../static/zhanhui/xiala.png" mode=""
						style="width: 19upx;height: 10upx;"></image>
				</view>

			</view>
			<view class="shipin" v-else>
				<view :class="isStyle?'works_box':'works_boxs'">
					<view v-for="(item,index) in splist" :index="index" class="mo">
						<view class='item' @click="navPlayer(item.shop_id,index,item.video_id)">
							<image :src='item.cover_img'
								style="width: 340upx;height: 450upx;border-radius: 10upx 10upx 0px 0px;"></image>
							<text class="title">{{item.shopinfo_shop_name}}</text>
						</view>
						
					</view>
				</view>
				<view style="color: #999999;display: flex;align-items: center;justify-content: center;" @click="more"
					v-show="isStyle" v-if="splist.length>5">查看更多<image src="../../static/zhanhui/xiala.png" mode=""
						style="width: 19upx;height: 10upx;"></image>
				</view>

			</view>
		</view>`
		<view class="tuijian">
			<view style="color: #999999;padding: 30upx;" v-if="zhinfo.circle_type==2">推荐优惠</view>
			<view class="tui-content">
				<view class="nav" v-for="item in zhanlist" v-if="zhinfo.circle_type==2">
					<image :src="item.goods_img" mode="" style="width: 180upx;height: 180upx;border-radius: 10upx;">
					</image>
					<view
						style="display: flex;flex-direction: column;padding-left: 10upx;justify-content: space-around;">
						<text
							style="width:398upx;word-break:break-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;">{{item.goods_name}}</text>
						<text style="text-decoration:line-through">{{item.market_price}}</text>
						<view style="display: flex;align-items: center;justify-content: space-between;">
							<text style="color: #FF3D3D;font-size: 30upx;font-weight: bold;">￥{{item.shop_price}}</text>
							<view class="goumai" @click="goumai(item.goods_id)">立即购买</view>
						</view>
					</view>
				</view>
			</view>
			<view
				style="color: #999999;padding: 30upx;display: flex;align-items: center;justify-content: space-between;"
				v-if="zhinfo.circle_type==4">
				<text>本场职位</text>
				<text @click="tomore">更多 ></text>
			</view>
			<view class="" style="padding-bottom: 40upx;">
				<view class="zhiwei" v-if="zhinfo.circle_type==4" v-for="item in zhilist" @click.prevent.stop="tozhi(item.id)">
					<view style="flex-direction: row;justify-content: space-between;align-items: center;display: flex;">
						<view class="z-tou">
							<text style="padding-left: 5upx;font-size: 32upx;font-weight: 550;">{{item.job_name}}</text>
							<text
								style="width: 60upx;height: 36upx;font-size: 24upx;background-color: #2687FF;color: #fff;display: inline-block;text-align: center;line-height: 36upx;margin-left: 17upx;border-radius: 5upx;"
								v-if="item.job_type==1">校招</text>
							<text v-else
								style="width: 60upx;height: 36upx;font-size: 24upx;background-color: #FFC600;color: #fff;display: inline-block;text-align: center;line-height: 36upx;margin-left: 17upx;border-radius: 5upx;">社招</text>
						</view>
						<text style="font-weight: normal;">{{item.min_salary}}k-{{item.max_salary}}k</text>
					</view>
					<view class="" style="padding-top: 30upx;">
						<text class="yaoqiu">{{item.educ_name}}</text>
						<text class="yaoqiu" style="margin-left: 20upx;">{{item.year}}</text>
					</view>
					<view
						style="flex-direction: row;justify-content: space-between;align-items: center;display: flex;padding: 20upx 0;padding-left: 5upx;">
						<text style="font-size: 28upx;color: #999999;">{{item.work_address}}</text>
						<view
							style="background-color: #F5F5F5;width: 140upx;border-radius: 15upx;color: #FFFFFF;text-align: center;padding: 10upx;height: 60upx;"
							v-if="item.is_send==1">
							<text style="color: #999999;text-align: center;line-height: 44upx;">已投递</text>
						</view>
						<view
							style="background-color: #FF3D3D;width: 120upx;border-radius: 15upx;color: #FFFFFF;text-align: center;padding: 10upx;height: 60upx;line-height: 44upx;"
							v-else @click.prevent.stop="toudi(item)">
							<text style="color: #fff;">投递</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="mores" v-if="isshow">
			<view class="slists">
				<view class="pr52" style="padding-left: 0px;">
					<text :class="[zab==1 ? 'red' : '']" @click="tabw(1)" v-if="zhinfo.circle_type==4" >岗位数量</text>
					<text :class="[zab==1 ? 'red' : '']" @click="tabw(1)" v-else>预成交金额</text>
				</view>
<!-- 				<view class="pr52" v-if="zhinfo.circle_type!==4">
					<text :class="[zab==2 ? 'red' : '']" @click="tabw(2)">参展人数</text>
				</view> -->
				<view class="">
					<text :class="[zab==3 ? 'red' : '']" @click="tabw(3)">直播人气</text>
				</view>
				<image src="@/static/closed.png" mode=""
					style="width: 30upx;height: 30upx;position: absolute;right: 16upx;top: 32upx;"
					@click="isshow=false"></image>
			</view>

		<!-- 	<h5 style="padding: 20upx;padding-left: 40px;" v-if="zab==1">本次预计成交金额 <text
					style="color: #FF3D3D;">{{total_num}}</text></h5> -->
					<h5 style="padding: 20upx;padding-left: 15px;" v-if="zab==1">本次招聘会总岗位数 <text
							style="color: #FF3D3D;">{{total_num}}</text></h5>
			<h5 style="padding: 20upx;padding-left: 40px;" v-if="zab==2">本次参展人气 <text
					style="color: #FF3D3D;">{{total_num}}</text></h5>
			<view v-if="zab==1">
				<view class="list" v-for="item,index in list">
					<text>{{index}}</text>
					<image :src="item.logo" mode="" style="width: 100upx;height: 100upx;"></image>
					<view style="display: flex;flex-direction: column;width: 300upx;">
						<text style="font-size: 24upx;">{{item.shop_desc}}</text>
						<text style="color: #999999;font-size: 24upx;">{{item.shop_name}}</text>
					</view>
					<text>{{item.turnover_money}}w</text>
					
				</view>
			</view>
			<view v-if="zab==3">
				<scroll-view scroll-y="true" style="width: 100%;height: 400px;background-color: #fff;z-index: 999;">
					<view class="list" v-for="item,index in lists" style="z-index: 999;">
						<text>{{index+1}}</text>
						<image :src="item.logo" mode="" style="width: 100upx;height: 100upx;"></image>
						<view style="display: flex;flex-direction: column;width: 300upx;">
							<text style="font-size: 24upx;">{{item.shop_desc}}</text>
							<text style="color: #999999;font-size: 24upx;">{{item.shop_name}}</text>
						</view>
						<text>{{item.access_num}}</text>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="popContainer" v-if="isshow"></view>
		<view class="bottoms">
			<view class="cc" @click="lianxi">
				联系我们
			</view>
			<view class="cg" @click="baoming" v-if="is_sign !== 1">
				我要参观
			</view>
			<view class="cg" v-else style="background-color: #999999;">
				已报名参观
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tabs: -1,
				zab: 1,
				taba: -1,
				isshow: false,
				zhinfo: {},
				fenlei: [],
				shopId: '',
				circle_id: '',
				splist: [],
				totalinfo: {},
				pagesize: 10,
				page: 1,
				list: [],
				lists: [],
				total_num: 0,
				zhanlist: [],
				userInfos: {},
				isStyle: true,
				page: 1,
				zhilist: [],
				userid:'',
				is_sign:''
			}
		},
		onShow() {
		},
		onLoad(option) {
			try {
				const value = uni.getStorageSync('userInfo');
				if (value) {
					this.userInfos = value
					var userInfos = JSON.parse(this.userInfos)
				}
			} catch (e) {
				// error
			}
			this.shopId = option.shop_id
			this.circle_id = option.circle_id
			if(option.useid){
				this.userid = option.useid
			}
			if (this.userInfos == undefined) {	
				uni.request({
					url: "https://dsx.cdzer.com/api/Circle/getshopjob", //仅为示例，并非真实接口地址。
					data: {
						circle_id: option.circle_id,
						page: this.page
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					success: (res) => {
						console.log(res, "招聘职位")
						this.zhilist = res.data.data
					}
				});
			} else {
				uni.request({
					url: "https://dsx.cdzer.com/api/Circle/getshopjob", //仅为示例，并非真实接口地址。
					data: {
						circle_id: option.circle_id,
						uid: this.userid,
						page: this.page
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					success: (res) => {
						console.log(res, "招聘职位")
						this.zhilist = res.data.data
					}
				});
				uni.request({
					url: "http://dsx.cdzer.com/api/Circle/exhibition", //仅为示例，并非真实接口地址。
					data: {
						circle_id: option.circle_id,
						uid:this.userid
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					success: (res) => {
						console.log(res, "展会信息")
						this.zhinfo = res.data.data.circle_info
						this.fenlei = res.data.data.circle_class
						this.is_sign = res.data.data.is_sign
					}
				});
			}
			
			this.getsplist(0)
			uni.request({
				url: "http://dsx.cdzer.com/api/Circle/activities_data", //仅为示例，并非真实接口地址。
				data: {
					circle_id: option.circle_id
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				method: 'POST',
				success: (res) => {
					console.log(res, "获取参展统计数据")
					this.totalinfo = res.data.data
					
				}
			});
			uni.request({
				url: "https://dsx.cdzer.com/api/Circle/getshopgoods ", //仅为示例，并非真实接口地址。
				data: {
					circle_id: option.circle_id,
					page: this.page,
					page_size: 10
				},
				header: {
					'content-type': 'application/x-www-form-urlencoded',
				},
				method: 'POST',
				success: (res) => {
					console.log(res, "展会推荐商铺")
					this.zhanlist = res.data.data
				}
			});
			this.paiming()
		},
		methods: {
			toudi(item){

				// console.log(JSON.parse(this.userInfos),"item")
				if(JSON.stringify(this.userInfos) == '{}'){
					uni.showModal({
					
						title: '提示',
					
						content: "你还未登录，是否前往登录页面",
					
						success: function(res) {
					
							if (res.confirm) {
								console.log('用户点击确定');
								uni.navigateTo({
									url: '/pagesB/login/login'
								})
							} else if (res.cancel) {
					
								console.log('用户点击取消');
					
							}
					
						}
					
					});
				}else if(JSON.parse(this.userInfos).shop_id>0){
					var that = this
					uni.showModal({
					
						title: '提示',
					
						content: "商家无法投递简历",
					
						success: function(res) {
					
							if (res.confirm) {
								console.log('用户点击确定');
					
							} else if (res.cancel) {
					
								console.log('用户点击取消');
					
							}
					
						}
					
					});
				}else{
					var userInfos = JSON.parse(this.userInfos)
					uni.request({
						url: 'http://dsx.cdzer.com/api/Job/apply_job', //仅为示例，并非真实接口地址。
						method: 'POST',
						data:{
							job_id:item.id,
							shop_id:item.shop_id,
							uid:userInfos.id
						},
						header: {
							'content-type': 'application/x-www-form-urlencoded',
						},
						success: (res) => {
							console.log(res,"投递")
							if(res.data.status==200){
								uni.request({
									url: "https://dsx.cdzer.com/api/Circle/getshopjob", //仅为示例，并非真实接口地址。
									data: {
										circle_id: this.circle_id,
										uid: userInfos.id,
										page: this.page
									},
									header: {
										'content-type': 'application/x-www-form-urlencoded',
									},
									method: 'POST',
									success: (res) => {
										console.log(res, "招聘职位")
										this.zhilist = res.data.data
									}
								});
								uni.showToast({
									title:res.data.mess,
									icon:'none'
								})
								
							}else{
								var that = this
								uni.showModal({
								
									title: '提示',
								
									content: "是否前往个人中心完善简历信息",
								
									success: function(res) {
								
										if (res.confirm) {
											uni.switchTab({
												url:'/pages/tabBar/mydetail'
											})
											console.log('用户点击确定');
								
										} else if (res.cancel) {
								
											console.log('用户点击取消');
								
										}
								
									}
								
								});
					
							}
						}
					});
				}
				
			},
			tozhi(id) {
				uni.navigateTo({
					url: `./zhidetail?id=${id}`
				})
			},
			tomore() {
				var cateid = this.zhinfo.cate_id
				var zhanid = this.circle_id
				uni.navigateTo({
					url: `./morepin?cateid=${cateid}&zhanid=${zhanid}`
				})
			},
			goumai(id) {
				uni.navigateTo({
					url: `/pagesC/homeSon/goodsDetails?id=${id}&navitem=1`
				})
			},
			more() {
				this.isStyle = false
			},
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			lianxi() {
				console.log(this.shopId)
				uni.navigateTo({
					url: `./lianxi?shop_id=${this.shopId}&circle_id=${this.circle_id}`
				})
			},
			baoming() {
				uni.navigateTo({
					url: `./baoming?circle_id=${this.circle_id}`
				})
			},
			paiming() {
				uni.request({
					url: "http://dsx.cdzer.com/api/Circle/turnover_ranking", //仅为示例，并非真实接口地址。
					data: {
						circle_id: this.circle_id,
						page: this.page,
						page_size: this.pagesize
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					success: (res) => {
						console.log(res, "成交额排名")
						this.list = res.data.data.ranking
						this.total_num = res.data.data.total_num
					}
				});
			},
			paimings() {
				uni.request({
					url: "http://dsx.cdzer.com/api/Circle/number_ranking", //仅为示例，并非真实接口地址。
					data: {
						circle_id: this.circle_id,
						page: this.page,
						page_size: this.pagesize
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					success: (res) => {
						console.log(res, "成交额排名")
						this.lists = res.data.data.ranking
					}
				});
			},
			navPlayer(id, index, ppid) {
				if(JSON.stringify(this.userInfos) == '{}'){
					var yonghuinfo = ''
					var useid = ''
					var shipin = JSON.stringify(this.splist)
				}else{
					var yonghuinfo = JSON.parse(this.userInfos)
					var useid = JSON.parse(this.userInfos).id
					var shipin = JSON.stringify(this.splist)
				}
				
				uni.navigateTo({
					url: './player?shpo_id=' + id + '&index=' + index + '&typed=' + 0 + '&page=' + this
						.page + '&shipin=' + shipin + '&useid=' + useid
				})
			},
			tab(i, index) {
				this.tabs = i
				this.taba = -1
				this.getsplist(0)
			},
			tabg(id, index) {
				this.taba = index
				this.tabs = ''
				this.getsplist(id)
				console.log(this.tabs, "fenfenl")
			},
			tabw(i) {
				this.zab = i
				if (i == 1) {
					this.paiming()
				} else if (i == 3) {
					this.paimings()
				}
			},
			getsplist(id) {
				// console.log(JSON.parse(this.userInfos),"look look 用户信息")
				// var yonghuinfo = JSON.parse(this.userInfos)
				uni.request({
					url: "http://dsx.cdzer.com/api/Circle/activities_shopsvideo", //仅为示例，并非真实接口地址。
					data: {
						circle_id: this.circle_id,
						class_id: id,
						uid:this.useid
					},
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					method: 'POST',
					success: (res) => {
						console.log(res, "展后视频")
						this.splist = res.data.data
					}
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zhiwei {
		padding: 20upx 10upx;
		background-color: #fff;
		width: 94%;
		margin: 0 auto;
		border-radius: 12upx;
		margin-top: 10upx;
	}

	.yaoqiu {
		height: 45upx;
		display: inline-block;
		background-color: #f5f5f5;
		text-align: center;
		line-height: 45upx;
		padding: 15upx;
		padding-left: 24upx;
		padding-right: 24upx;
		border-radius: 12upx;
		color: #666666;
	}

	.tuijian {
		// height: 1000upx;
		border-top: 2upx solid #DDDDDD;
		border-bottom: 2upx solid #DDDDDD;
		width: 100%;

		.tui-content {
			display: flex;
			flex-direction: column;
			width: 100%;
			padding: 15upx;
		}

		.nav {
			display: flex;
			background-color: #fff;
			border-radius: 10upx;
		}

		.goumai {
			width: 160upx;
			height: 60upx;
			background: #FF3D3D;
			color: #FFFFFF;
			text-align: center;
			line-height: 60upx;
			border-radius: 10upx
		}
	}

	.title {
		font-size: 30upx;
		width: 329upx;
		background-color: #EEEEEE;
		padding: 6upx;
		color: #666666;
		white-space: nowrap; //规定段落中的文本不进行换行
		text-overflow: ellipsis;
		overflow: hidden;
	}

	.bottoms {
		width: 100%;
		height: 100upx;
		align-items: center;
		display: flex;
		justify-content: center;
		position: fixed;
		bottom: 0;
		background-color: #fff;

		.cc {
			width: 340upx;
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			border-radius: 15upx;
			color: #FF3D3D;

			background: #FFF1F1;
		}

		.cg {
			width: 340upx;
			height: 80upx;
			text-align: center;
			line-height: 80upx;
			border-radius: 15upx;
			background-color: #FF3D3D;
			margin-left: 20upx;
			color: #fff;
		}
	}

	.works_boxs {
		display: flex;
		flex-wrap: wrap;
		height: auto;
		overflow: hidden;
		justify-content: space-between;

		.mo {
			// padding-left: 10upx;
			// width: 46%;
			flex-direction: column;
			margin-top: 20upx;
			align-items: center;
			justify-content: center;
		}

		.item {
			display: flex;
			flex-direction: column;
		}
	}

	.works_box {
		display: flex;
		flex-wrap: wrap;
		// height: 1580upx;
		overflow: hidden;
		justify-content: space-between;

		.mo {
			// padding-left: 10upx;
			// width: 46%;
			flex-direction: column;
			margin-top: 20upx;
			align-items: center;
			justify-content: center;
		}

		.item {
			display: flex;
			flex-direction: column;
		}
	}


	.list {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding-top: 30upx;
	}

	.popContainer {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
		z-index: 99;
	}

	.mores {
		width: 100%;
		// padding: 30upx;
		height: 1000upx;
		position: fixed;
		background-color: #FFFFFF;
		z-index: 999;
		bottom: 0;
	}

	.shipin {
		padding: 30upx;
	}

	.slist {
		width: 100%;
		display: flex;
		justify-content: space-around;
	}

	.slists {
		width: 100%;
		display: flex;
		padding-bottom: 30upx;
		padding: 30upx;
		justify-content: flex-start;
		border-bottom: 2upx solid #D1D1D1;

		view {
			padding-left: 50upx;
		}
	}

	.red {
		color: #FF3D3D;
		font-weight: 550;
	}

	.banner {
		padding: 45upx 30upx;
		display: flex;
		width: 100%;
		align-items: center;
		justify-content: space-between;

		view {
			width: 160upx;
			height: 100upx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.da {
			font-size: 40upx;
			color: #FFFFFF;
		}

		.xiao {
			font-size: 26upx;
			color: #FFFFFF;
		}
	}

	.header {
		// background: url(../../static/zhanhui/header.png) no-repeat;
		width: 100%;
		height: 500upx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		h2,
		h4,
		h3,
		h5 {
			color: #FFFFFF;
			padding-top: 18upx;
		}
	}

	.nav {
		padding: 30upx;
		color: #666666;
		font-size: 24upx;
		margin-top: 20upx;
	}
</style>
